<template>
	<div class="panel-container">
		<panelTitle title="企业概况" sub-title="COMPANY PROFILE"></panelTitle>

		<div class="panel-content">
			<div class="level-1">
				<div class="item item-1">
					<div class="item-title">员工总数</div>
					<div class="item-value">{{ formModel.t1 }}</div>
				</div>
				<div class="item item-2">
					<div class="item-title">访客总数</div>
					<div class="item-value">{{ formModel.t2 }}</div>
				</div>
			</div>

			<div class="level-2">
				<div class="item item-3">
					<div class="item-title">设备总数</div>
					<div class="item-value">{{ formModel.t3 }}</div>
				</div>
				<div class="item item-4">
					<div class="item-title">离线总数</div>
					<div class="item-value">{{ formModel.t4 }}</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup name="company-profile">
import panelTitle from '../panel-title/index.vue'
import { ref } from 'vue'

const formModel = ref({
	t1: '1,678',
	t2: '1,678',
	t3: '1,678',
	t4: '1,678',
})
</script>

<style lang="scss" scoped>
@use 'sass:math';

.panel-content {
  // 224px
  height: 11.666667vw;
	// 因为有1px边框问题，所以24-1-1 = 22px
	padding: 1.25vw 1.145833vw 1.25vw 1.25vw;

	box-sizing: border-box;
	background: linear-gradient(
		360deg,
		rgba(56, 185, 255, 0.16) 0%,
		rgba(56, 185, 255, 0) 100%
	);
	border: 1px solid;
	border-image: linear-gradient(
			360deg,
			rgba(56.000000461936, 185.00000417232513, 255, 1),
			rgba(56.000000461936, 185.00000417232513, 255, 0.11999999731779099)
		)
		1 1;
	border-top: none;
  overflow: hidden;

.level-1,.level-2 {
  width: 100%;
  display: flex;
	flex-wrap: wrap;
  column-gap: 0.833333vw;
}

.level-1 {
  // 设计稿1920 *1080px 下的具体的margin-bottom
  // margin-bottom: 16px;
  // 先在浏览器随便一个 padding、margin  拿到1% 是多少像素， 然后将设计稿里面的 16px 转换成百分比
  // 比如： 1% --》 4.078 px  = 16px   *  ? 百分比
  // margin-bottom: 3.92349%;
  // margin-bottom: 0.833333vw;
}

	.item {
    flex: 1;
    flex-shrink: 0;
		box-sizing: border-box;
		// width: 196px;
		// height: 80px;
    height: 4.166667vw;
    // height: 19.617459%;
		// padding-left: 88px;
    padding-left: 4.583333vw;
		color: #fff;
		overflow: hidden;

		.item-title {
			font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
			font-weight: 400;
			font-size: 0.729167vw;
			line-height: 0.729167vw;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 0.364583vw;
			margin-bottom: 0.364583vw;
			box-sizing: border-box;
		}

		.item-value {
			font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
			font-weight: 700;
			font-size: 1.458333vw;
			line-height: 1.458333vw;
			text-align: left;
			font-style: normal;
			text-transform: none;
			margin-top: 0.78125vw;
			box-sizing: border-box;
		}
	}

	.item-1 {
		background: url('@/assets/images/01/img_template_face-1.png') no-repeat;
		background-size: 100% 100%;
	}

	.item-2 {
		background: url('@/assets/images/01/img_template_face-2.png') no-repeat;
		background-size: 100% 100%;
	}

	.item-3 {
		background: url('@/assets/images/01/img_template_face-3.png') no-repeat;
		background-size: 100% 100%;
	}

	.item-4 {
		background: url('@/assets/images/01/img_template_face-4.png') no-repeat;
		background-size: 100% 100%;
	}
}
</style>
